{% extends 'frame.html' %}

{% block mymeta %}
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
{% endblock %}

{% block customcss %}
    <link rel="stylesheet" type="text/css" href="/static/css/doublebox-bootstrap.css">
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.css">
    <style>
        .ue-container {
             width: 60%;
             margin: 0 auto;
             margin-top: 3%;
             padding: 20px 40px;
             border: 1px solid #ddd;
             background: #fff;
            float: left;
         }
	</style>
{% endblock %}
{% block right-container %}
    <div class="right-container">
    <div class="row" style="margin: 0">
        <table align="left" border="0" class="" style="margin:15px 0px 0px 15px;padding-left:15px;">
            <tr class="success" style="height: 200px;">
                <td width="160" style="height: 200px;text-align: center;padding: 5px;">
                    <h5 align="center">待选主机</h5>
                    <select name="first" multiple="multiple" size="8" class="td3" id="first" style="height: 200px">
                         {% for host in serverlist %}
                            <option value="{{ host.HostName }}">{{ host.HostName }}</option>
                         {% endfor %}
                            <option value="test">test</option>
                    </select>
                </td>
                <td width="80" valign="middle" align="center" style="height:200px;margin: 5px;text-align: center;padding:5px;">
                   <p><input style="width:50px" align="center" name="add" id="add" type="button" class="button" value="-->" /></p>
                   <p><input style="width:50px" name="add_all" id="add_all" type="button" class="button" value="==>" /></p>
                   <p><input style="width:50px" name="remove"  id="remove" type="button" class="button" value="&lt;--" /></p>
                   <p><input style="width:50px" name="remove_all"  id="remove_all" type="button" class="button" value="&lt;==" /></p>
                </td>
                <td width="160" align="left" id='td2' style="padding:0;height:200px;!important;text-align: center;padding:5px;">
                    <h5 align="center">已选主机</h5>
                    <select name="second" style="width:126px;height:200px;" multiple="multiple" size="8" class="td3" id="second"></select>
                </td>
            </tr>
        </table>
        <div class="input-cmd-group">
            <div class="form-group">
                <label for="hosts">输入主机</label>
                <input type="text" class="form-control" placeholder="10.0.0.1;10.0.0.2" required disabled="disabled">
            </div>
            <div class="form-group">
                <label for="commands">输入命令</label>
                <input type="text" class="form-control" id="commands" placeholder="df -h" required>
            </div>
            <div class="panel panel-info">
                <div class="panel-heading">
                    <button class="btn btn-primary execcmd">
                        执行命令
                    </button>
                </div>
            </div>
        </div>
        </div>
        <div class="panel panel-info saltResult">
            <div class="panel-heading">
                执行结果
            </div>
            <div class="panel panel-body" id="result">
                <table class="table table-hover table-condensed resultTable">
                    <tr>
                        <th class="success">主机</th>
                        <th class="success">执行结果</th>
{#                        <th class="success">Success</th>#}
                    </tr>
                </table>

            </div>
        </div>
    </div>

{% endblock %}



{% block customjs %}
    <script type="text/javascript" src="/static/js/doublebox-bootstrap.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#add").click(function(){
                $("#first>option:selected").appendTo($("#second"));
            });
            // 2 将左边所有的option移到右边去
            $("#add_all").click(function(){
                $("#first>option").appendTo($("#second"));
            });
            $("#remove").click(function(){
                $("#second>option:selected").appendTo($("#first"));
            });
            $("#remove_all").click(function(){
                $("#second>option").appendTo($("#first"));
            });
            // 双击 ondbclick - dbclick()
            // <select>元素的特点 - 事件绑定在select元素
            $("#first").dblclick(function(){
                $("#first>option:selected").appendTo($("#second"));
            });
            $("#second").dblclick(function(){
                $("#second>option:selected").appendTo($("#first"));
            });
            $(".execcmd").click(function() {
                var ips = $("select#second").val();
                var b = $("#commands").val();
                logConf = {"hostname": ips,"command":b};
                alert(logConf);
                $.ajax({
                    type:"POST",
                    url:"/saltcmd/",
                    data:JSON.stringify(logConf),   // create string object
                    dataType:'json',
                    success: function(obj) {     // get response
                        alert("success");
                        $(".cmd-result").remove();
                        var Resu = obj.result;
                        for (var k in Resu){
                            var Html = "<tr class='cmd-result'><td style='width:160px;'>"+k+"</td>"+"<td>"+Resu[k][0].replace(/\\n/gm,'<br>').replace(/ /gm,'&nbsp;')+"</td>"+"</tr>";
                            $(".resultTable").append(Html);
                        }
                        },
                    error: function (result) {
                        alert("api error");
                    }
                    });
                });
        });
    </script>

{% endblock %}